<template>
    <div class="health-container">
        <div class="bg-left"></div>
        <div class="center-view">
            <div class="title-view">
                <div class="device-title"></div>
            </div>
            <div class="banner-view">
                <Swiper class="mySwiper" :effect="'coverflow'" :speed="300" :grabCursor="true" :centeredSlides="true"
                    :slidesPerView="2" :pagination="false" :modules="modules" :coverflowEffect="{
                        rotate: -50, //滑动时旋转角度
                        stretch: 50, //聚合宽度
                        depth: 200, //景深
                        modifier: 1, //覆盖叠加层数
                        slideShadows: false, //是否阴影
                    }" @swiper="onSwiper" @slideChange="onSlideChange">
                    <swiper-slide v-for="(item, index) in actived" :key="item.yjmc" @click="hendleDetailClick(item.ordernum - 1)">
                        <div class="slide-header">
                            <img class="header-left" src="@/assets/images/card-left.png" alt="">
                            <span class="title">{{ item.yjmc }}</span>
                            <img class="header-right" src="@/assets/images/card-right.png" alt="">
                        </div>
                        <p class="slide-content">
                            {{ item.ms }}
                        </p>
                        <div class="slide-foot">
                            <img src="@/assets/images/card-device.png" alt="">
                            <div>
                                <div class="device">硬件</div>
                                <div>
                                    <span class="count">{{ item.sl}}</span>
                                    <span class="unit">/{{  item.unit}}</span>
                                </div>
                            </div>
                        </div>
                        <el-switch v-model="item.status" class="ml-2" inline-prompt :active-value="1" :inactive-value="0"
                            style="--el-switch-on-color: #041741; --el-switch-off-color: #041741" disabled/>
                    </swiper-slide>
                </Swiper>
            </div>
            <div class="button-view">
                <div class="btn" v-for="(item, index) in actived" :key="item.yjmc" @click="handleButtonClick(index)">
                    <img v-show="!item.active" class="icon-img" :src="getAssetsFile(`00${index + 1}`)" />
                    <img v-show="!item.active" class="text" :src="getAssetsFile(`0${index + 1}`)" />
                    <img v-show="item.active" class="icon-img" :src="getAssetsFile(`hover_00${index + 1}`)" />
                    <img v-show="item.active" class="text" :src="getAssetsFile(`hover_0${index + 1}`)" />

                </div>
            </div>
        </div>
        <div class="bg-right"></div>
    </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/effect-coverflow";
import { ref, reactive } from "vue";
import { EffectCoverflow } from "swiper";
import { jscgList } from "@/api/system/sbda";
import { useRouter } from "vue-router";
const router =  useRouter()
function getList() {
    jscgList().then(response => {
        console.log("🚀 ~ file: index.vue:110 ~ jscgList ~ response:", response)
        const newArr = []
        actived.value.forEach(item=>{
            const findIndex = response.rows.findIndex(i=>i.yjmc===item.yjmc)
            const newItem = {...item}
            if (findIndex > -1) {
                Object.assign(newItem, response.rows[findIndex])
            }
            newArr.push(newItem)
        })
        actived.value = newArr
    });
}
getList();
const modules = ref([EffectCoverflow]);
const slider = ref(null);
const actived = ref([{
    yjmc: '键鼠套装',
    active: false
}, {
    yjmc: '3D眼镜',
    active: false
},{
    yjmc: '大空间多人协同交互系统',
    active: false
},{
    yjmc: 'CAVE交互显示系统',
    active: true
},{
    yjmc: '图形工作站',
    active: false
},{
    yjmc: '高清液晶电视',
    active: false
},{
    yjmc: '监控摄像头',
    active: false
},]);
const onSwiper = (event) => {
    slider.value = event;
    slider.value.slideTo(3)
}
const onSlideChange = (event) => {
    actived.value = actived.value.map((item, index) => {
        const newItem = {...item}
        if (index === event.realIndex) {
            newItem.active = true
        }else {
            newItem.active = false
        }
        return newItem
    })
}
const handleButtonClick = (index) => {
    slider.value.slideTo(index)
}
const getAssetsFile = (name) => {
    const path = `../../assets/images/buttons/${name}.png`
    const modules = import.meta.globEager('../../assets/images/buttons/*.png')
    return modules[path].default
}
const hendleDetailClick = (index) => {
    router.push({path: 'deviceBase/card', query:{index}})
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
